<template>
  <view class="member-page bg-white" :style="my_style">
    <!-- 修改个人信息 -->
    <view class="u-m-b-78 flex-center fdc">
      <image class="head u-m-b-2" @click="uploadImage" :src="user_info.headimg" mode=""></image>
      <text class="light-color font-24 lh-34" @click="uploadImage">修改头像</text>
    </view>
    <!-- 表单 -->
    <view class="form">
      <view class="cell border-bottom1 flex-row">
        <view class="label">昵称</view>
        <input type="text" v-model="user_info.nickname" placeholder="请输入昵称" />
      </view>
      <view class="cell border-bottom1 flex-row">
        <view class="label">手机号</view>
        <input type="text" class="light-color" disabled="true" :value="user_info.mobile" />
        <view
          class="red-color font-28 flex m-r-38 u-m-r-20"
          @click="jump('/views/user/setting/mobile?scene=change_bind')"
          >换绑手机号<u-icon name="arrow-right" color="#CCCCCC" size="25rpx"></u-icon>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="footer-primary-btn flex-center" @tap="$u.debounce(editUserInfo, 2000, true)"
        >保存</view
      >
    </view>
  </view>
</template>

<script>
  import mixin from '@/mixin/ali'
  export default {
    mixins: [mixin],
    data() {
      return {
        user_info: '',
      }
    },
    onLoad(options) {
      this.getUserInfo()
    },
    methods: {
      /**
       * 获取用户信息
       */
      async getUserInfo() {
        const res = await this.$api.common.user('getUserInfo')
        if (res.code === 200) {
          this.user_info = res.data
        }
      },
      /**
       * 修改用户信息
       */
      async editUserInfo() {
        const { nickname, headimg } = this.user_info
        let params = {
          nickname,
          headimg,
        }
        const res = await this.$api.common.user('editUserInfo', params)
        if (res.code === 200) {
          this.successBack('修改成功')
        }
      },
      // 上传图片
      uploadImage() {
        let _this = this
        uni.chooseImage({
          count: 1,
          success: (v) => {
            const tempFilePaths = v.tempFilePaths
            let temp = tempFilePaths[0]
            let file_name = v.tempFiles[0].name
            _this.fileUpload('image', temp, file_name, (res) => {
              _this.user_info.headimg = res
            })
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .member-page {
    height: 100%;
    padding: 70rpx 0 444rpx;

    .head {
      width: 156rpx;
      height: 156rpx;
      border-radius: 50%;
    }

    .form {
      padding-left: 24rpx;

      .cell {
        width: 100%;
        height: 88rpx;
        font-size: 32rpx;
        background: #fff;

        .label {
          width: 128rpx;
        }

        input {
          flex: 1;
        }
      }
    }

    .footer {
      padding: 156rpx 24rpx 0;
    }
  }
</style>
